<template>
  <div class="container">
    <div class="container-left">
      <div class="header">
        <div class="sider">
          <p class="sider-title-top">质量指标达标率</p>
          <p class="sider-title-bottom">重点质量指标</p>
        </div>
        <div class="main">
          <div class="main-title">
            <span>应用层</span>
            <span>共享层</span>
            <span>编解码层</span>
            <span>采集层</span>
          </div>
          <div class="main-top">
            <div class="main-top-box">
              <div class="main-top-box-header">
                <pieChart sum="100" reachNum="80"></pieChart>
                <div class="rate-index">
                  达标指数:
                  <span>48</span>/50
                  <span></span>
                </div>
              </div>
              <div class="main-top-box-footer" @click="handClick">
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">{{rateSum}}</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
              </div>
            </div>
            <div class="main-top-box">
              <div class="main-top-box-header">
                <pieChart sum="100" reachNum="80"></pieChart>
                <div class="rate-index">
                  达标指数:
                  <span>48</span>/50
                  <span></span>
                </div>
              </div>
              <div class="main-top-box-footer" @click="handClick">
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">{{rateSum}}</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
              </div>
            </div>
            <div class="main-top-box">
              <div class="main-top-box-header">
                <pieChart sum="100" reachNum="90"></pieChart>
                <div class="rate-index">
                  达标指数:
                  <span>48</span>/50
                  <span></span>
                </div>
              </div>
              <div class="main-top-box-footer" @click="handClick">
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">{{rateSum}}</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
              </div>
            </div>
            <div class="main-top-box">
              <div class="main-top-box-header">
                <pieChart sum="100" reachNum="99"></pieChart>
                <div class="rate-index">
                  达标指数:
                  <span>48</span>/50
                  <span></span>
                </div>
              </div>
              <div class="main-top-box-footer" @click="handClick">
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">{{rateSum}}</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
                <div class="single">
                  <p class="single-text">VOLTE_V2V建立时延完整性(%)</p>
                  <p class="single-text">97.85</p>
                  <p class="single-text single-boult-box">
                    {{rateGrow}}
                    <span :class="[rateGrow > 0 ? 'single-boult-add': 'single-boult']"></span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="main-bottom">
            <lineChart></lineChart>
          </div>
        </div>
      </div>
      <div class="footer">
        <span :class="[indexChart === '1' ? 'active-click' : '']" @click="()=>{indexChart='1'}">故障时长</span>
        <span
          :class="[indexChart === '2' ? 'active-click' : '']"
          @click="()=>{indexChart='2'}"
        >故障设备占比</span>
        <span
          :class="[indexSecondChart === '3' ? 'active-click' : '']"
          @click="()=>{indexSecondChart='3'}"
        >故障次数，时长排名</span>
        <span
          :class="[indexSecondChart === '4' ? 'active-click' : '']"
          @click="()=>{indexSecondChart='4'}"
        >故障次数环比</span>
      </div>
      <div class="chart">
        <div class="chart-left">
          <barPieChart v-if="indexChart === '1'"></barPieChart>
          <barChart2 v-else></barChart2>
        </div>
        <div class="chart-right">
          <barChart3 v-if="indexSecondChart === '3'"></barChart3>
          <barChart4 v-else></barChart4>
        </div>
      </div>
    </div>
    <div class="container-right">
      <div class="box-one">
        <a-tabs style="height:100%;width:100%" type="card" default-active-key="1">
          <a-tab-pane key="1" tab="Tab 1" class="tab-sty">
            <a-carousel dotsClass="bottom-cor" style="height:100%">
              <div>
                <a-list item-layout="horizontal" :data-source="LBdata">
                  <a-list-item slot="renderItem" slot-scope="item">
                    <a-list-item-meta>
                      <a slot="title" href="https://www.antdv.com/">
                        {{
                        item.title
                        }}
                      </a>
                      <a-avatar
                        style="width:20px;height:20px"
                        slot="avatar"
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                      />
                    </a-list-item-meta>
                  </a-list-item>
                </a-list>
              </div>
              <div>
                <h3>2</h3>
              </div>
              <div>
                <h3>3</h3>
              </div>
              <div>
                <h3>4</h3>
              </div>
            </a-carousel>
          </a-tab-pane>
          <a-tab-pane key="2" tab="Tab 2" class="tab-sty" force-render>Content of Tab Pane 2</a-tab-pane>
        </a-tabs>
      </div>
      <div class="box-tow">
        <barChart></barChart>
      </div>
      <div class="box-three">
        <p class="box-three-title">厂家评分</p>
        <div class="click-title">
          <span :class="spanIndex === '1' ? 'active-span':''" @click="()=>{spanIndex='1'}">应用层</span>
          <span :class="spanIndex === '2' ? 'active-span':''" @click="()=>{spanIndex='2'}">共享层</span>
          <span :class="spanIndex === '3' ? 'active-span':''" @click="()=>{spanIndex='3'}">编解码层</span>
          <span :class="spanIndex === '4' ? 'active-span':''" @click="()=>{spanIndex='4'}">采集层</span>
        </div>
        <barChart5></barChart5>
      </div>
    </div>
  </div>
</template>

<script>
import pieChart from "./components/pieChart.vue";
import lineChart from "./components/lineChart.vue";
import barChart from "./components/barChart.vue";
import barPieChart from "./components/barPieChart.vue";
import barChart2 from "./components/barChart2.vue";
import barChart3 from "./components/barChart3.vue";
import barChart4 from "./components/barChart4.vue";
import barChart5 from "./components/barChart5.vue";
export default {
  name: "App",
  data() {
    return {
      number: 0,
      linkArray: ["https://www.baidu.com/"],
      LBdata: [
        {
          title: "Ant Design Title 1"
        },
        {
          title: "Ant Design Title 2"
        },
        {
          title: "Ant Design Title 3"
        },
        {
          title: "Ant Design Title 4"
        }
      ],
      rateGrow: "0.02",
      rateSum: "97.85",
      indexChart: "1",
      indexSecondChart: "3",
      spanIndex: '1'
    };
  },
  components: {
    pieChart,
    lineChart,
    barChart,
    barPieChart,
    barChart2,
    barChart3,
    barChart4,
    barChart5
  },
  methods: {
    tabClick(val) {
      console.log(val);
      // window.location.href = this.linkArray[val]
    },
    handClick(e) {
      console.log(e.target.nodeName.toLowerCase() === "p");
      // if(e.target.nodeName.toLowerCase() === 'div') {
      console.log(e.target.innerHTML);
      // }
    }
  }
};
</script>
<style scoped>
.container {
  width: 80%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  background: rgb(230, 228, 228);
}
.container-left {
  width: 68%;
  height: 100%;
}
.left-sidebar {
  width: 40px;
  height: 100%;
  border: 1px solid #ccc;
  background: #01b0f1;
}
.header {
  width: 100%;
  height: 95%;
  display: flex;
}
.sider {
  width: 5%;
  height: 100%;
  background: #01b0f1;
  color: white;
}
.sider-title-top {
  width: 15px;
  height: 40%;
  margin: auto;
  padding-top: 10px;
  border-bottom: 1px solid black;
  /* 垂直方向自右而左的书写方式 */
  /* writing-mode: vertical-rl; */
}
.sider-title-bottom {
  width: 15px;
  height: 60%;
  margin: auto;
  padding-top: 100px;
  line-height: 30px;
}
.main {
  width: 100%;
  height: 100%;
  background: white;
}
.main-title {
  width: 100%;
  height: 5%;
  background: #01b0f1;
  text-align: center;
  color: white;
}
.main-title span {
  width: 25%;
  height: 100%;
  display: inline-block;
  border-right: 1px solid #0479a3;
}
/* 通过伪元素让百分比高度的内容垂直居中 */
.main-title span:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
.main-top {
  width: 100%;
  height: 50%;
  display: flex;
}
.main-top-box {
  width: 25%;
  height: 100%;
  /* border: 1px solid black; */
}
.main-top-box-header {
  width: 100%;
  height: 50%;
  border-right: 1px solid #1b90d7;
  position: relative;
}
.rate-index {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 60%;
}
.rate-index span:nth-of-type(1) {
  color: #00cc00;
}
.rate-index span:nth-of-type(2) {
  height: 0;
  width: 0;
  display: inline-block;
  border-width: 10px 5px;
  border-color: #fff #fff #57af1a #fff;
  border-style: solid dashed dashed dashed;
}
.main-top-box-footer {
  width: 100%;
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  /* background: wheat; */
}
.single {
  width: 50%;
  height: 50%;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid #1b90d7;
  border-right: 1px solid #1b90d7;
  border-bottom: 1px solid #1b90d7;
}
.single-text {
  margin: 0;
}
.single-boult-box {
  position: relative;
}
.single-boult,
.single-boult-add {
  display: inline-block;
  position: absolute;
  top: 15%;
  left: 73%;
  height: 12px;
  width: 2px;
  background: red;
  line-height: 40px;
}
.single-boult-add {
  background: #00cc00;
}
.single-boult:before {
  content: "";
  position: absolute;
  top: 6px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-top: 3px solid red;
  border-right: 3px solid red;
  transform: rotate(135deg);
}
.single-boult-add:before {
  content: "";
  position: absolute;
  top: 0;
  right: -3px;
  width: 8px;
  height: 8px;
  border-top: 3px solid #00cc00;
  border-right: 3px solid #00cc00;
  transform: rotate(-45deg);
}
.main-bottom {
  width: 100%;
  height: 45%;
  border-right: 1px solid #1b90d7;
}
.footer {
  width: 100%;
  height: 5%;
  text-align: center;
  color: white;
  border: 1px solid #ccc;
  background: rgb(10, 92, 245);
  cursor: pointer;
}
.footer span {
  width: 25%;
  height: 100%;
  display: inline-block;
  background: #0184d2;
}
.footer span:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
.active-click {
  background: #01b0f1 !important;
}
.container-right {
  width: 28%;
  height: 100%;
}
.box-one {
  width: 100%;
  height: 40%;
}
.box-one >>> .ant-tabs-nav {
  width: 100%;
}
.box-one >>> .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  background: #01b0f1 !important;
}
.box-one >>> .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  width: 50%;
  text-align: center;
  background: #0184d2;
  border-radius: 0;
  border: none;
  margin-right: 0;
  color: white;
}
.box-tow {
  width: 100%;
  height: 40%;
  margin: 13% 0;
  padding: 0 10px;
  box-sizing: border-box;
  background: white;
}
.box-three {
  width: 100%;
  height: 40%;
  background: white;
}
.box-three-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: white;
  background: rgba(17, 138, 238, 0.589);
  margin-bottom: 0;
}
.click-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: rgb(111, 229, 233);
  margin-bottom: -20px;
  cursor: pointer;
}
.click-title span {
  display: inline-block;
  width: 25%;
  border-bottom: 1px solid #ccc;
}
.click-title .active-span {
  background: white;
  border-bottom: none;
} 
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 100%;
  line-height: 160px;
  background: white;
  /* overflow: hidden; */
}
.box-one >>> .ant-carousel .slick-dots li button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #797878;
}
.box-one >>> .ant-carousel .slick-dots li.slick-active button {
  background: #6fc2de;
}
.chart {
  width: 100%;
  height: 40%;
  display: flex;
}
.chart-left {
  width: 50%;
  height: 100%;
  border-right: 1px solid #6fc2de;
}
.chart-right {
  width: 50%;
  height: 100%;
}
</style>
